<template>
  <div class="table-data">
    <div class="table-data__title">{{ viewName }}{{ dataSize }}</div>
    <el-table :data="list">
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column prop="jiansuobds" label="检索条件" show-overflow-tooltip />
      <el-table-column prop="yonghuid" label="检索结果条数" width="140" />
      <el-table-column prop="jiansuolx" label="检索类型" width="120" />
      <el-table-column prop="jiansuosj" label="检索时间" width="260" />
      <el-table-column v-if="false" prop="jiansuolsid" label="检索历史Id" width="180" />
      <el-table-column prop="" width="300">
        <template v-slot="{ row }">
          <el-button icon="el-icon-refresh-right" type="primary" @click="reSearchData({row});">重新检索</el-button>
          <!-- el-icon-star-on  -->
          <el-button v-if="row.shifousc == '1'" class="table-data__collection active" icon="el-icon-star-on">已收藏</el-button>
          <el-button v-else class="table-data__collection" icon="el-icon-star-off" @click="_collectionHistory({row});">收藏</el-button>
          <!--<i class="fr " v-bind:class="row.isColl ? 'el-icon-star-on':'el-icon-star-off'" @click="changeStart(index, row.jiansuolsid)"></i> -->
        </template>
      </el-table-column>

    </el-table>
    <!-- pagination -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { deleteCollectionHistory, deleteSearchHistory, collectionHistory, getCollectionHistoryList, getSearchHistoryList } from '@api/searchHistory'
import { buildSearch } from '@api/quick'

export default {
  name: 'TableData',
  data() {
    return {
      dataSize: 0,
      list: [],
      // 当前页
      currentPage: 1,
      pageSize: 10,
      onePaneName: '',
      viewName: '检索历史总量：',
      pageTotal: 0
    }
  },
  created() {
    this._getCollectionHistoryList() /* 获取检索历史列表 */
  },
  methods: {
    async _buildSearch() {
      const { data } = await buildSearch() /* 获取收藏历史列表 */
      console.log(`--------------_buildSearch---------------------`)
      console.log(data)

      this.list = data.docs || []
      this.dataSize = data.total
      this.pageTotal = data.total
    },
    async _getCollectionHistoryList() {
      const { data } = await getCollectionHistoryList({ page: this.currentPage, size: this.pageSize }) /* 获取收藏历史列表 */
      console.log(`--------------_getCollectionHistoryList---------------------`)
      console.log(data)

      this.list = data.docs || []
      this.dataSize = data.total
      this.pageTotal = data.total
    },
    async _collectionHistory(row) {
      console.log(`--------------row.row.jiansuolsid---------------------`)
      console.log(row.row.jiansuolsid)

      const { code, msg } = await collectionHistory({ 'jiansuolsid': row.row.jiansuolsid }) /* 获取收藏历史列表 */
      console.log(`--------------_collectionHistory---------------------`)
      console.log(msg)
      console.log(code)
      if (code == 200) {
        this.$message.warning('收藏检索历史成功！')
      }
      // this._getCollectionHistoryList();                   /* 获取检索历史列表 */
      // this.$router.go(-1);
      // window.reload();
    },
    reSearchData(row) {
      const tempLx = row.row.jiansuolx
      if (tempLx == '快速检索') {
        console.log(`-------------- !!!! 快速检索 !!!! ---------------------`)
        // 跳转到[快速检索]列表显示界面
        this.$router.push({
          path: '/pages/index',
          query: {
            expList: JSON.stringify({ oldExp: row.row.jiansuobds, oldExpId: row.row.jiansuolsid }),
            dataSource: this.paneName
          }
        })
      } else if (tempLx == '高级检索') {
        console.log(`-------------- !!!! 高级检索 !!!! ---------------------`)
        // 跳转到[高级检索]列表显示界面
        this.$router.push({
          path: '/pages/advanced-search',
          query: {
            expList: JSON.stringify({ oldExp: row.row.jiansuobds, oldExpId: row.row.jiansuolsid }),
            dataSource: this.paneName
          }
        })
      } else if (tempLx == '证据检索') {
        console.log(`-------------- !!!! 证据检索 !!!! ---------------------`)
        // 跳转到[高级检索]列表显示界面
        this.$router.push({
          path: '/pages/evidence-confirm-search',
          query: {
            expList: JSON.stringify({ oldExp: row.row.jiansuobds, oldExpId: row.row.jiansuolsid }),
            dataSource: this.paneName
          }
        })
      } else if (tempLx == '法律问题检索') {
        console.log(`-------------- !!!! 法律问题检索 !!!! ---------------------`)
        // 跳转到[高级检索]列表显示界面
        this.$router.push({
          path: '/pages/legislation-question-search',
          query: {
            expList: JSON.stringify({ oldExp: row.row.jiansuobds, oldExpId: row.row.jiansuolsid }),
            dataSource: this.paneName
          }
        })
      }

      console.log(`-------------- reSearchData ---------------------`)
      console.log(tempLx)
    },

    changeStart(index, point) {
      const coll = !this.runPoint[index].isCollect
      this.$set(this.runPoint[index], 'isCollect', coll)
    },
    // size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this._getCollectionHistoryList()
    },
    // 当前页改变
    handleCurrentChange(val) {
      console.log(`当前 ${val} 页`)
      this.currentPage = val
      this._getCollectionHistoryList()
    },
    // 当前页改变
    changePageAllValue(paneName) {
      this.onePaneName = paneName
      console.log('--------------------- changePageAllValue -------------------')
      console.log(this.onePaneName)
      if (this.onePaneName == 'history') { // 历史记录
        console.log('--------------------- 历史记录 -------------------')
        this.viewName = '总条数：'
        this._getSearchHistoryList() /* 获取检索历史列表 */
      } else if (this.onePaneName == 'collection') { // 收藏记录
        console.log('--------------------- 收藏记录 -------------------')
        this.viewName = '总条数：'
        this._getCollectionHistoryList() /* 获取收藏历史列表 */
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-data {
  font-family: "PingFang SC",宋体!important;
  &__title {
    font-size: 18px;
    color: #303133;
    font-weight: 700;
    margin-bottom: 20px;
  }

  &__collection {
    width: 102px;

    &.active {
      color: #2d54b8;
      border-color: #2d54b8!important;
    }
  }

  &__more {
    color: #2d54b8;
    transform: rotate(90deg);
    padding: 0 10px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.table-data {
  .el-button {
    padding: 10px 15px;
    font-family: "PingFang SC", 宋体;
    color: #303133;
    font-size: 16px;
    font-weight: 700;
    line-height: 1!important;

    &:hover {
      color: #4f74c4;
      border-color: #4f74c4;
      background: white;
    }

    &:focus {
      color: #1c3991;
      border-color: #1c3991;
      background: white;
    }

    &--danger {
      color: white;
      background: #f55656;
      &:hover {
        color: #fff;
        background-color: #ff8683;
        border-color: #ff8683;
      }
      &:focus {
        color: #fff;
        background-color: #cf3e43;
        border-color: #cf3e43;
      }
    }

    &--primary {
      color: white;
      background-color: #2d54b8;
      border-color: #2d54b8;

      &:hover {
        background: #4f74c4;
        border-color: #4f74c4;
        color: white;
      }

      &:focus {
        background: #1c3991;
        border-color: #1c3991;
        color: white;
      }
    }
  }

  /* 表格样式 */

  .el-table {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    font-size: 16px !important;
    color: #303133;

    .el-table__header tr th {
      background: #f1f1f1;
      color: #303133;
    }

    td {
      //padding: 0;
      //height: 36px;
      //line-height: 36px;

      /*.el-button {*/
      /*  //height: 28px;*/
      /*  //line-height: 28px;*/
      /*  //padding: 0 6px;*/
      /*  !*color: #303133;*!*/
      /*  font-size: 16px;*/

      /*  &:hover {*/
      /*    color: #4f74c4;*/
      /*    border-color: #4f74c4;*/
      /*  }*/

      /*  &:focus {*/
      /*    color: #1c3991;*/
      /*    border-color: #1c3991;*/
      /*  }*/
      /*}*/
    }
  }

  /*  分页器样式 */

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-select .el-input.is-focus .el-input__inner,
  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #2d54b8;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border-color: #2d54b8;
    color: #2d54b8;
    background-color: #fff !important;
  }

  .el-pagination.is-background .el-pager li:not(.disabled):hover,
  .el-pagination button:hover {
    color: #2d54b8;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li{
    color: #303133;
    background-color: white;
    border: 1px solid #dedfe6;
  }

  .el-select-dropdown__item.selected {
    color: #2d54b8 !important;
  }

  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: #2d54b8;
  }
}
</style>
